<!DOCTYPE html>
<html>
	<head>
		<title>Cell styling</title>
        <link rel="stylesheet" href="../../codebase/webix/webix.css" type="text/css" charset="utf-8">
        <script src="../../codebase/webix/webix.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="../../codebase//pivot.css" type="text/css" charset="utf-8">
        <script src="../../codebase/pivot.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" href="../common/samples.css" type="text/css" charset="utf-8">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            .row1{
                background-color: #f1f1f1 !important;
            }
            .row2{
                background-color: #f5f5f5 !important;
            }
        </style>
	</head>
	<body>
		<div id="testA"></div>

		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			grida = webix.ui({
				container:"testA",
                view:"pivot",
                height:400,
                width:1000,

                data:pivot_dataset,
                
                structure: {
                    rows: ["form", "name"],
                    columns: ["year"],
                    values: [{ name:"gdp", operation:"sum"}, { name:"oil", operation:"sum"}],
                    filters:[]
                },
                on:{
                    onBeforeRender: function(config){
                        var columns = config.header;
                        for(var i=0; i < columns.length; i++){
                            columns[i].cssFormat = function(value, item, itemId, columnId){
                                // if branch
                                if(item.$count)
                                    return "row"+item.$level;
                            }
                        }
                    }
                }
			});

		});
		</script>
	</body>
</html>